<template>
	<view class="iottery_record">
		<view class="head" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/contribution/iottery_record_headbmg@2x.png') + ')' }">
			<view class="menu">
				<view class="menu_centent1">
					<view class="p1 flex-between">
						<view :class="active===0?'v1':'v2'" @click="selectIndex(0)">{{titArr[0].name}}</view>
						<view :class="active===1?'v1':'v2'" @click="selectIndex(1)">{{titArr[1].name}}</view>
					</view>
				</view>
				<view class="menu_centent2">
					<view class="p2 flex-between">
						<view :class="active===0?'v3':'v4'"></view>
						<view :class="active===1?'v3':'v4'"></view>
					</view>
				</view>
			</view>
		</view>
		<mescroll-uni ref="mescroll" @getData="getList" :top="320" :size="8">
			<block slot="list">
				<view class="issue_list" v-if="active===0">
					<view class="issue_list_item" v-for="(item,index) in listData" :key="index">
						<image :src="item.goods_img" @click="$util.redirectTo('/promotionpages/contribution/details?id='+item.loot_goods_id+'&stage='+item.stage)"></image>
						<view class="issue_list_itemContent">
							<view class="issue_goodsname" @click="$util.redirectTo('/promotionpages/contribution/details?id='+item.loot_goods_id+'&stage='+item.stage)">{{item.goods_name}}</view>
							<view class="issue_winner">中奖者：{{item.phone}}</view>
							<view class="issue_time">开奖时间：{{item.lottery_time}}</view>
						</view>
					</view>
					<ns-empty v-if="!listData.length" text="暂无往期记录" :isIndex="!1"></ns-empty>
				</view>
				<view class="participate_list" v-if="active===1">
					<view class="participate_list_item" v-for="(item,index) in listData" :key="index">
						<view class="part1">
							<view class="part_left" @click="$util.redirectTo('/promotionpages/contribution/details?id='+item.loot_goods_id+'&stage='+item.stage)">
								<view class="state2 flex-center" v-if="item.status===2" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/contribution/iottery_record_underwaying@2x.png') + ')' }">第{{item.stage}}期进行中</view>
								<view class="state1" v-if="item.status===0" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/contribution/iottery_recordnot_winning@2x.png') + ')' }">
									<view class="state1_v1 flex-center">第{{item.stage}}期</view>
									<view class="state1_v2 flex-center">未中奖</view>
								</view>
								<view class="state0" 
								 @click="$util.redirectTo('/promotionpages/contribution/details?id='+item.loot_goods_id+'&stage='+item.stage)"
								v-if="item.status===1" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/contribution/iottery_record_winning@2x.png') + ')' }">
									<view class="state1_v1 flex-center">第{{item.stage}}期</view>
									<view class="state1_v2 flex-center">已中奖</view>
								</view>
								<image :src="item.goods_img"></image>
							</view>
							<view class="part_right">
								<view class="participate_goodname"  @click="$util.redirectTo('/promotionpages/contribution/details?id='+item.loot_goods_id+'&stage='+item.stage)">{{item.goods_name}}</view>
								<view class="v5 flex-between">
									<view class="v_5">
										<view class="v6">数字资产</view>
										<view class="contribution_value">{{item.exchange_value}}</view>
									</view>
									<view class="logistics_but flex-center" v-if="item.status===0" @click="check_logistics(item.order_id)">查看物流</view>
								</view>
							</view>
						</view>
						<view class="line"></view>
						<view class="hideview" v-if="isClose && index===coloe_index">
							<view class="hpart1 flex-between">
								<view class="lab1">参与时间</view>
								<view class="lab2">{{item.create_time}}</view>
							</view>
							<view class="hpart2 flex-between">
								<view class="lab1">收货人</view>
								<view class="lab2">{{item.phone}}</view>
							</view>
							<view class="hpart3">
								<view class="lab3">地址</view>
								<view class="lab4">{{item.address}}</view>
							</view>
						</view>
						<view class="line" v-if="isClose && index===coloe_index"></view>
						<view class="operation" @click="closeClick(index)">
							<view class="operation_core flex-center">
								<view class="operation_t">{{isClose && index===coloe_index ? '收起':'展开'}}</view>
								<image :src="isClose && index===coloe_index ? $util.img('/upload/uniapp/contribution/iottery_record_close@2x.png'):$util.img('/upload/uniapp/contribution/iottery_record_an@2x.png')"></image>
							</view>
						</view>
					</view>
					<ns-empty v-if="!listData.length" text="暂无参与记录" :isIndex="!1"></ns-empty>
				</view>
			</block>
			<loading-cover ref="loadingCover"></loading-cover>
		</mescroll-uni>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				isClose:false,
				coloe_index:0,//点击的展开和收起的是哪一个
				active:0,//菜单选中的位置
				titArr: [{
					name:'往期开奖'
				},{
					name:'我参与的'
				}],
				listData:[]//列表数据
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '夺宝记录'
			})
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				this.$util.redirectTo(
					'/otherpages/login/login/login', {
						back: '/promotionpages/contribution/iottery_record'
					},
					'redirectTo'
				);
			}
		},
		methods:{
			getList(mescroll){
				this.mescroll = mescroll;
				var url = '/loot/api/Activity/getOpenPrizeLists';
				if(this.active==1){
					url = '/loot/api/Activity/getMyRecordLists'
				}
				this.$api.sendRequest({
					url,
					data:{
						page: mescroll.num,
						page_size: mescroll.size
					},
					success:res =>{					
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data && res.data.list) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.listData = []; //如果是第一页需手动制空列表
						this.listData = this.listData.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						this.showEmpty = true;
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			selectIndex(index){//切换”往期开奖“和”我参与的“开关方法
				this.active = index;
				this.mescroll.resetUpScroll();
			},
			check_logistics(order_id){//查看物流
				if (!order_id) {
					return this.$util.showToast({ title: '暂无物流数据信息！'});
				}
				this.$util.redirectTo('/otherpages/order/logistics/logistics?order_id='+order_id);
			},
			closeClick(index){//中奖时的展开收起方法
				if(this.coloe_index===index){//判断是否点击的同一个item
					this.isClose = !this.isClose
				}else{
					this.isClose = true//不是则直接是打开
				}
				this.coloe_index = index
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .member-record .mescroll-uni-content {
		overflow: hidden;
	}
	@mixin bgm($imagename) {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// background-image: url('../../common/img/contribution/'+$imagename);
	}
	@mixin flex($jusitify,$align) {
		display: flex;
		justify-content: $jusitify;
		align-items: $align;
	}
	.flex-left{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.flex-between{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.iottery_record{
		width: 750rpx;
		height: 100vh;
		overflow: hidden;
		background: #F8F8F8;
		.head{
			width: 100%;
			height: 280rpx;
			position: relative;
			z-index: 99999;
			@include bgm('iottery_record_headbmg@2x.png');
			.menu{
				position: absolute;
				top: calc(var(--status-bar-height) + 236rpx);
				left: 30rpx;
				width: 690rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				.menu_centent1{
					.p1{
						margin: 24rpx 109rpx 0 109rpx;
					}
				}
				.menu_centent2{
					.p2{
						margin: 18rpx 135rpx 0 135rpx;
					}
				}
			}
		}
		.issue_list{
			padding: 64rpx 20rpx 0 20rpx;
			.issue_list_item{
				padding: 20rpx 20rpx 30rpx 20rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				image{
					max-width: 180rpx;
					height: 180rpx;
				}
				.issue_list_itemContent{
					margin-left: 20rpx;
					.issue_goodsname{
						max-height: 92rpx;
						line-height: 46rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #303133;
						overflow: hidden;
						word-break: break-all;  /* break-all(允许在单词内换行。) */
						text-overflow: ellipsis;  /* 超出部分省略号 */
						display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
						-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
						-webkit-line-clamp: 2; /** 显示的行数 **/
					}
					.issue_winner{
						margin-top: 40rpx;
						height: 38rpx;
						font-size: 26rpx;
						line-height: 38rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #606266;
					}
					.issue_time{
						margin-top: 12rpx;
						height: 38rpx;
						font-size: 26rpx;
						line-height: 38rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #606266;
					}
				}
			}
		}
		.participate_list{
			padding: 64rpx 20rpx 0 20rpx;
			.participate_list_item{
				padding: 20rpx 20rpx 0 20rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				.part1{
					display: flex;
					.part_left{
						width: 180rpx;
						height: 180rpx;
						border-radius: 16rpx;
						image{
							width: 180rpx;
							height: 180rpx;
						}
						.state2{
							position: absolute;
							margin-top: 140rpx;
							z-index: 1;
							height: 40rpx;
							width: 180rpx;
							line-height: 40rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #C64D06;
							@include bgm('iottery_record_underwaying@2x.png')
						}
						.state1{
							display: flex;
							position: absolute;
							margin-top: 140rpx;
							z-index: 1;
							height: 40rpx;
							width: 180rpx;
							@include bgm('iottery_recordnot_winning@2x.png');
						}
						.state0{
							display: flex;
							position: absolute;
							margin-top: 140rpx;
							z-index: 1;
							height: 40rpx;
							width: 180rpx;
							@include bgm('iottery_record_winning@2x.png');
						}
					}
					.part_right{
						margin: 10rpx 20rpx 0 20rpx;
						.participate_goodname{
							height: 92rpx;
							line-height: 46rpx;
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #303133;
							overflow: hidden;
							word-break: break-all;  /* break-all(允许在单词内换行。) */
							text-overflow: ellipsis;  /* 超出部分省略号 */
							display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
							-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
							-webkit-line-clamp: 2; /** 显示的行数 **/
						}
						.v5{
							margin-top: 30rpx;
							.v_5{
								display: flex;
								.v6{
									height: 38rpx;
									line-height: 38rpx;
									font-size: 26rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #303133;
								}
								.contribution_value{
									margin-left: 8rpx;
									height: 38rpx;
									line-height: 38rpx;
									font-size: 26rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #FF4544;
								}
							}
							.logistics_but{
								width: 170rpx;
								height: 60rpx;
								border-radius: 32rpx;
								border: 1rpx solid #909399;
								line-height: 60rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #606266;
							}
						}
					}
				}
				.hideview{
					padding: 24rpx 20rpx 0 20rpx;
					.hpart2{
						margin-top: 5rpx;
					}
					.hpart3{
						display: flex;
						justify-content: space-between;
						margin-top: 5rpx;
						.lab3{
							height: 38rpx;
							line-height: 38rpx;
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #909399;
						}
						.lab4{
							margin-left: 150rpx;
							line-height: 38rpx;
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #303133;
						}
					}
				}
				.operation{
					padding: 15rpx 20rpx 15rpx 20rpx;
					.operation_core{
						.operation_t{
							height: 28rpx;
							line-height: 28rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #303133;
						}
						image{
							width: 28rpx;
							height: 28rpx;
						}
					}
				}
			}
		}
	}
	.v1{
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF4544;
	}
	.v2{
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: #303133;
	}
	.v3{
		width: 60rpx;
		height: 6rpx;
		background: #FF4544;
	}
	.v4{
		width: 60rpx;
		height: 6rpx;
		background: #FFFFFF;
	}
	.lab1{
		height: 38rpx;
		line-height: 38rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #909399;
	}
	.lab2{
		height: 38rpx;
		line-height: 38rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #303133;
	}
	.line{
		margin-top: 30rpx;
		width: 100%;
		height: 1rpx;
		background: #EBEBEB;
	}
	.state1_v1{
		width: 90rpx;
		line-height: 33rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #C64D06;
	}
	.state1_v2{
		width: 90rpx;
		line-height: 33rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
